import { ComponentProps, Link, VueComponent } from "vue3-oop";
import { Form } from 'ant-design-vue';
import FvrGrid from '../widgets/_grid/fvr-grid'
import { FormData,WidgetNode} from '../types'
import moduleCss from './index.module.scss'

interface IProps {
  formData: FormData
}
export default class FormPreview extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData:{}
  }

  constructor(
  ){
    super();
  }

  @Link() form?:typeof Form;

  triggerValidate=()=>{
    this.form?.validate().then((formValues:any)=>{
      console.log(formValues)
    }).catch((errorValues:any)=>{
      console.log("catch",errorValues)
    })
  }

  triggerPrintData=()=>{
    console.log(this.props.formData.codeValueObj)
  }

  render() {
    const widgetNode = this.props.formData.nodeTree as WidgetNode;

    return (
      <Form
        model={this.props.formData.formModel}
        ref='form'
        class={[moduleCss['fdn-preview']]}
        labelCol={{
          style:{width:`${this.props.formData.labelWidth}px`}
        }}
        labelAlign={this.props.formData.labelAlign as any}
      >
        <FvrGrid widgetNode={widgetNode} />
      </Form>
    )
  }
}